<template>
	<view class="recharge">
		<view class="header">
			<text>支付方式</text>
			<view class="iconGroup">
				<view class="Alipay" @click="choose(0)">
					<i class='iconfont'>&#xe702;</i>
					<text>支付宝</text>
					<i class='iconfont chooseIcon' v-if="chooseBoxIndex===0">&#xe9e6;</i>
				</view>
				<view class="Alipay wachat" @click="choose(1)">
					<i class='iconfont '>&#xe605;</i>
					<text>微信</text>
					<i class='iconfont chooseIcon' v-if="chooseBoxIndex===1">&#xe9e6;</i>
				</view>
			</view>
		</view>
		<view class="middle">
			<text class="word">充值金额(元)</text>
			<view><text>￥</text><input class="uni-input" type="number" @input='changeBJ = true' v-model="money" placeholder='输入充值金额，单笔充值最小1000元' placeholder-style="font-weight:400;font-size:28upx;color:#cccccc;" placeholder-class="phStyle"></view>
		</view>
		<view class="footer">
			<text>*因各银行单日交易限额，大额充值可选择多个银行分批交易。</text>
			<view class="recharge_btn" :class="{activeBj:changeBJ}" @click="recharge">
				充值
			</view>
		</view>
		
	</view>
</template>

<script>
var util = require('../../../common/util.js');
export default {
    data() {
        return {
            money: '',
            chooseBoxShadow: true,
            changeBJ: false,
            chooseBoxIndex: 0,
            providerList: [],
            params: {
                orderId: 0,
                number: 0,
                orderType: 'recharge',
                unionId: '',
                payType: 'alipay',
                surplus: 0,
                offlinePay: false,
                remark: '',
                name: '',
                mobile: '',
                address: '',
                inviteCode: '',
                token: util.getUserToken()
            }
        };
    },
    onLoad: function() {
        // #ifdef APP-PLUS
        uni.getProvider({
            service: 'payment',
            success: e => {
                console.log('payment success', e);
                console.log(e.provider);

                this.providerList = e.provider.map(value => {
                    switch (value) {
                        case 'alipay':
                            return {
                                name: '支付宝',
                                id: value,
                                loading: false
                            };
                        case 'wxpay':
                            return {
                                name: '微信',
                                id: value,
                                loading: false
                            };
                    }
                });
            },
            fail: e => {
                console.log('获取支付通道失败：', e);
            }
        });
        // #endif
    },
    methods: {
        handleBlur(e) {},
        recharge(e) {
            // console.log(parseInt(this.money));
            if (!this.money) {
                uni.showToast({
                    title: '请输入金额！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (parseInt(this.money) < 1000) {
                uni.showToast({
                    title: '最低充值1000元！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            uni.showLoading({
                title: '正在充值...'
            });
            this.params.number = parseInt(parseFloat(this.money) * 100);
						// console.log(this.params)
            util.ajax(
                'userPay',
                this.params,
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
											console.log(json)
											uni.requestPayment({
													provider: this.params.payType,
													orderInfo: json.data, //订单数据
													success: function(res) {
															console.log('success:' + JSON.stringify(res));
																uni.showToast({
																		title: '充值成功',
																		icon: 'none',
																		duration: 600
																});
													},
													fail: function(err) {
															console.log('fail:' + JSON.stringify(err));
													}
											});
											
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        choose(value) {
            if (value) {
                this.chooseBoxIndex = 1;
                this.params.payType = 'wxpay';
            } else {
                this.chooseBoxIndex = 0; //支付宝
                this.params.payType = 'alipay';
            }
            console.log(this.params);
        }
    }
};
</script>

<style lang="less">
@import '../../../common/icon.css';
// @import '../../../common/uni.css';
.phStyle {
    font-size: 28upx;
}
.recharge {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
    .header {
        background: white;
        padding: 30upx 30upx 30upx;
        box-sizing: border-box;
        flex-direction: column;
        & > text {
            font-size: 30upx;
            color: #000000;
        }
        .iconGroup {
            margin-top: 30upx;
            .Alipay {
                // border: 1upx solid #dddddd;
                flex-direction: column;
                width: 154upx;
                height: 160upx;
                border-radius: 10upx;
                justify-content: center;
                align-items: center;
                -moz-box-shadow: 0px 0px 12px #dbdbdb;
                -webkit-box-shadow: 0px 0px 12px #dbdbdb;
                box-shadow: 0px 0px 12px #dbdbdb;
                position: relative;
                i:first-child {
                    // margin-bottom: 10upx;
                    font-size: 80upx;
                    color: #1196da;
                }

                text {
                    font-size: 24upx;
                }
            }
            .wachat {
                margin-left: 26upx;
                i:first-child {
                    // margin-bottom: 10upx;
                    font-size: 80upx;
                    color: #29a415;
                }
            }
            .chooseIcon {
                position: absolute;
                bottom: -3upx;
                right: -3upx;
                font-size: 50upx;
                color: #ff1268;
            }
            .chooseBoxShadow {
                -moz-box-shadow: 1upx 1upx 12upx #ff1268;
                -webkit-box-shadow: 1upx 1upx 12upx #ff1268;
                box-shadow: 1upx 1upx 12upx #ff1268;
            }
        }
    }
    .middle {
        padding: 30upx 30upx 30upx;
        box-sizing: border-box;
        flex-direction: column;
        background: white;
        margin-top: 20upx;
        .word {
            font-size: 28upx;
            color: rgb(102, 102, 102);
        }
        view {
            margin-top: 20upx;
            align-items: center;
            text {
                font-size: 50upx;
                color: #333333;
                font-weight: 600;
            }
            input {
                font-size: 42upx;
                color: #333333;
                font-weight: 600;
                padding-left: 20upx;
            }
        }
    }
    .footer {
        padding: 20upx 30upx 0;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;
        text {
            font-size: 24upx;
            color: #7b7b7b;
        }
        .recharge_btn {
            background: #ff1268;
            color: white;
            font-size: 34upx;
            width: 100%;
            height: 100upx;
            justify-content: center;
            align-items: center;
            border-radius: 5upx;
            margin: 120upx auto 0;
            background: -webkit-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -o-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -moz-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -mos-linear-gradient(to right, #fabde6, #ffa0c2);
            background: linear-gradient(to right, #fabde6, #ffa0c2);
        }
        .activeBj {
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
        }
    }
}
</style>
